<!--
  copyright (c) 2009 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license

  http://code.google.com/apis/visualization/documentation/gallery/gauge.html

-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Energy use
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery.timers-1.2.js"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['gauge']});
    </script>
    <script type="text/javascript">
    var reading;
    $(document).ready(function(){

        $(document).everyTime('5s', function(i) {
          drawVisualization();
        }, 0);
      $("button").click(function(){
      $(this).hide();
    });
    });
    </script>


    <script type="text/javascript">
      function drawVisualization() {
        $.getJSON("/last", function(json){
        // $.getJSON("http://roqueislandmonitor.appspot.com/last", function(json){
        // $.getJSON("readings.json", function(json){
           // alert("JSON Data: " + json[0]);
           reading = json.mA/1000;
           $("#reading").text(json.mA/1000+" Amps");
           $("#datetime").text(json.datetime);
	   // alert("A"+reading);
         });
        // alert("B"+reading);
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Label');
        data.addColumn('number', 'Value');
        data.addRows(3);
        data.setValue(0, 0, 'Amps');
        // data.setValue(0, 1, Math.floor(Math.random()*190)/10);
	// reading = Math.floor(Math.random()*190)/10;
        data.setValue(0, 1, reading);
/*
        data.setValue(1, 0, 'Amps');
        data.setValue(1, 1, 55);
        data.setValue(2, 0, 'Network');
        data.setValue(2, 1, 68);
*/
      
        // Create and draw the visualization.
        var options = {width: 400, height: 400, max: 20, redFrom: 18, redTo: 20,
            yellowFrom:16, yellowTo: 18, minorTicks: 5};
        new google.visualization.Gauge(document.getElementById('visualization')).
            draw(data, options);
      }
      

      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 400px; height: 400px;"></div>
    <div id="reading"></div>
    <div id="datetime"></div>
  </body>
</html>

